<template>
    <div class="form-post">
        <my-form 
        table
        v-model="form"
        @submit="submitHandler"
        >
            <el-form-item 
            label="收件人"
            class="table-full-row"
            prop="receive_username"
            :rules="newRule('收件人', 'required')"
            >
                <el-input v-model="form.receive_username"></el-input>
            </el-form-item>

            <el-form-item 
            label="收件人电话"
            class="table-full-row"
            prop="receive_mobile"
            :rules="newRule('收件人电话', 'required')"
            >
                <el-input v-model="form.receive_mobile"></el-input>
            </el-form-item>

            <el-form-item 
            label="邮寄地址"
            class="table-full-row"
            prop="receive_addr"
            :rules="newRule('邮寄地址', 'required')"
            >
                <el-input v-model="form.receive_addr" type="textarea"></el-input>
            </el-form-item>

            <template slot="btn" slot-scope="scope">
                <el-button 
                type="primary" 
                size="large"
                @click="scope.submitHandler"
                >
                    提交
                </el-button>
            </template>
        </my-form>
    </div>
</template>


<script>
export default {
    props: {
        data: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            form: {
                receive_username: '',
                receive_mobile: '',
                receive_addr: '',
            },
        };
    },
    methods: {
        submitHandler() {
            this.$post(`${this.$store.state.api.webUrl}/caagent/up.json`, {
                ...this.form,
                guid: this.data.guid,
            }, data => {
                this.$emit('close');
            });
        },
        initForm() {
            this.form = {
                ...this.data,
            };
        },
    },
    mounted() {
        this.initForm();
    },
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';
    
</style>